import React from "react";
import "./index.less";
export default function Footer(props) {
  const { todoList, changeAllChecked, deleteAllComplete } = props;
  return (
    <div className="todo-footer">
      <label>
        <input
          type="checkbox"
          checked={todoList.every((item) => item.done) && todoList.length !== 0}
          onChange={(e) => {
            changeAllChecked(e.target.checked);
          }}
        />
      </label>
      <span>
        <span>
          已完成
          {todoList.reduce((prev, current) => {
            return current.done ? prev + 1 : prev;
          }, 0)}
        </span>
        / 全部
        {todoList.length}
      </span>
      <button
        className="btn btn-danger"
        onClick={() => {
          deleteAllComplete();
        }}
      >
        清除已完成任务
      </button>
    </div>
  );
}
